<template>
  <div class="home">
    <Header />
    <Footer :type="1" />
    <SearchBox @click="searchVisible = true" />
    <Nav class="nav-bar" />
    <Banner />
    <div v-sticky="{ offset: 10 }" class="sticky-header">
      <el-tabs
        v-model="activeTab"
        class="custom-tabs"
        @tab-change="handleClick"
      >
        <el-tab-pane label="最新发布" name="latest"></el-tab-pane>
        <el-tab-pane label="热门职位" name="hot"></el-tab-pane>
        <el-tab-pane label="AI荐岗" name="ai"></el-tab-pane>
        <el-tab-pane label="我的收藏" name="favorite"></el-tab-pane>
      </el-tabs>
    </div>
    <section class="post-list" v-if="activeTab == 'latest'">
      <div class="post-list-header">
        <p class="list-title">最新职位列表</p>
        <div class="btn-filter" @click="searchVisible = true">
          <i class="icon icon-filter"></i>
          筛选
        </div>
      </div>
      <div class="post-list-content">
        <van-list
          v-model:loading="pageParams.loading"
          v-model:error="pageParams.error"
          :finished="pageParams.finished"
          :finished-text="pageParams.finishedText"
          error-text="没有更多了"
          @load="onPostLoad"
        >
          <PostItem
            v-for="item in postList"
            :key="item"
            :post="item"
            type="latest"
          />
        </van-list>
      </div>
    </section>
    <section class="post-list" v-if="activeTab == 'hot'">
      <div class="post-list-header">
        <p class="list-title">热门职位列表</p>
        <div class="btn-filter" @click="searchVisible = true">
          <i class="icon icon-filter"></i>
          筛选
        </div>
      </div>
      <div class="post-list-content">
        <van-list
          v-model:loading="pageHotParams.loading"
          v-model:error="pageHotParams.error"
          :finished="pageHotParams.finished"
          :finished-text="pageHotParams.finishedText"
          error-text="请求失败，点击重新加载"
          @load="onHotLoad"
        >
          <PostItem
            v-for="item in hotList"
            :key="item"
            :post="item"
            type="hot"
          />
        </van-list>
      </div>
    </section>
    <section class="post-list" v-if="activeTab == 'ai'">
      <div class="post-list-header">
        <p class="list-title">AI荐岗职位列表</p>
        <div class="btn-filter" @click="searchVisible = true">
          <i class="icon icon-filter"></i>
          筛选
        </div>
      </div>
      <div class="post-list-content">
        <van-list
          v-model:loading="pageAiParams.loading"
          v-model:error="pageAiParams.error"
          :finished="pageAiParams.finished"
          :finished-text="pageAiParams.finishedText"
          error-text="请求失败，点击重新加载"
          @load="onAiLoad"
        >
          <PostItem v-for="item in aiList" :key="item" :post="item" type="ai" />
        </van-list>
      </div>
    </section>
    <section class="post-list" v-if="activeTab == 'favorite'">
      <div class="post-list-header">
        <p class="list-title">我的收藏职位列表</p>
        <div class="btn-filter" @click="searchVisible = true">
          <i class="icon icon-filter"></i>
          筛选
        </div>
      </div>
      <div class="post-list-content">
        <van-list
          v-model:loading="pageCollecParams.loading"
          v-model:error="pageCollecParams.error"
          :finished="pageCollecParams.finished"
          :finished-text="pageCollecParams.finishedText"
          error-text="请求失败，点击重新加载"
          @load="onCollectLoad"
        >
          <PostItem
            v-for="item in collectList"
            :key="item"
            :post="item"
            type="favorite"
          />
        </van-list>
      </div>
    </section>

    <SearchFilter
      :visible="searchVisible"
      @search="onSearch"
      @close="searchVisible = false"
    />
    <!-- 悬浮咨询按钮 -->
    <div class="float-consult-btn" @click="online">
      <el-icon><ChatDotRound /></el-icon>
      <span>在线咨询</span>
    </div>
    <!-- 咨询对话框 -->
    <el-dialog
      v-model="showConsultDialog"
      title="在线咨询"
      width="80%"
      :before-close="handleCloseDialog"
    >
      <el-form
        :model="consultForm"
        :rules="rules"
        label-position="top"
        label-width="80px"
      >
        <el-form-item label="姓名" required>
          <el-input
            v-model="consultForm.person_name"
            placeholder="请输入您的姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" required>
          <el-input
            type="number"
            v-model="consultForm.person_phone"
            placeholder="请输入您的联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input
            v-model="consultForm.person_email"
            placeholder="请输入您的邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="咨询内容" required>
          <el-input
            v-model="consultForm.person_content"
            type="textarea"
            :rows="4"
            placeholder="请输入您要咨询的内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showConsultDialog = false">取消</el-button>
        <el-button type="primary" @click="submitConsult">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from "vue";
import { ChatDotRound } from "@element-plus/icons-vue";
import { List as vanList } from "vant";

import Header from "@/components/Header.vue";
import Nav from "./components/Nav.vue";
import PostItem from "@/components/PostItem.vue";
import Footer from "@/components/footer.vue";
import SearchFilter from "@/components/SearchFilter.vue";
import SearchBox from "./components/SearchBox.vue";
import Banner from "./components/Banner.vue";
import { useRouter } from "vue-router";
const router = useRouter();
import usePostSearch from "@/composables/usePostSearch";
import useHotSearch from "@/composables/useHotSearch";
import useAiSearch from "@/composables/useAiSearch";
import useCollectSearch from "@/composables/useCollectSearch";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getAiList,
  getHotList,
  getCollectList,
  getNewList,
  onlineConsultation,
} from "@/api/index";
const { postList, searchPostList, pageParams } = usePostSearch();
const { hotList, searchHotList, pageHotParams } = useHotSearch();
const { collectList, searchCollectList, pageCollecParams } = useCollectSearch();
const { aiList, searchAiList, pageAiParams } = useAiSearch();
const activeTab = ref("latest");
const searchVisible = ref(false);
const showConsultDialog = ref(false);
const store = useStore();
const isLogin = computed(() => store.state.isLogin);
// 咨询表单
const consultForm = ref({
  person_title: "来源贵阳贵安退役军人H5",
  person_Fc: ["在线咨询"],
  person_content: "",
  person_name: "",
  person_uname: "",
  person_phone: "",
  person_email: "",
  detail: "person_h5",
});
const menuIndex = ref(1);
const menuClick = (index) => {
  menuIndex.value = index;
  router.push("/home/list");
};
onMounted(() => {
  getMessage();
});
//获取我的消息列表
const getMessage = () => {
  let params = {
    page: 1,
    page_size: 10,
  };
  getNewList(params)
    .then((res) => {})
    .catch((err) => {});
};
const online = () => {
  showConsultDialog.value = true;
};
const handleLogin = (type) => {
  let url = "";
  if (location.host == "www.gzrc.com.cn") {
    url = "//m.gzrc.com.cn/mobile/login/?from_url=ex-serviceman";
  } else {
    url =
      "/webdev/m.gzrc.gov.cn/index.php?mode=index&doaction=login&from_url=ex-serviceman";
  }
  location.href = url;
};
const validatePhone = () => {
  const reg = /^1[3-9]\d{9}$/;
  if (!consultForm.value.person_phone) {
    error.value = "手机号不能为空";
    return false;
  }
  if (!reg.test(consultForm.value.person_phone)) {
    error.value = "请输入正确的手机号";
    return false;
  }
  error.value = "";
  return true;
};
// 提交咨询
const submitConsult = () => {
  consultForm.value.person_uname = consultForm.value.person_name;
  if (
    !consultForm.value.person_name ||
    !consultForm.value.person_phone ||
    !consultForm.value.person_title ||
    !consultForm.value.person_uname ||
    !consultForm.value.person_content
  ) {
    ElMessage.error("请填写完整的咨询信息");
    return;
  }
  const reg = /^1[3-9]\d{9}$/;
  if (!consultForm.value.person_phone) {
    ElMessage.error("手机号不能为空");
    return;
  }
  if (!reg.test(consultForm.value.person_phone)) {
    ElMessage.error("请输入正确的手机号");
    return;
  }

  onlineConsultation(consultForm.value)
    .then((res) => {
      if (res.code == 200) {
        ElMessage.success("咨询提交成功，我们将尽快回复您！");
        showConsultDialog.value = false;
        consultForm.value = {
          person_name: "",
          person_phone: "",
          person_title: "",
          person_uname: "",
          person_content: "",
        };
      } else {
      }
    })
    .catch((err) => {});
};
//搜索
const onSearch = (data) => {
  close();
  data.activeTab = activeTab.value;
  if (activeTab.value == "latest") {
    searchPostList(data);
  }
  if (activeTab.value == "hot") {
    searchHotList(data);
  }
  if (activeTab.value == "ai") {
    searchAiList(data);
  }
  if (activeTab.value == "favorite") {
    searchCollectList(data);
  }
};
const handleClick = (tab, event) => {
  // 重置所有列表数据
  postList.value = [];
  hotList.value = [];
  aiList.value = [];
  collectList.value = [];
  // 重置所有分页参数
  pageParams.value = {
    loading: false,
    finished: false,
    error: false,
    page: 1,
    pageSize: 10,
    finishedText: "没有更多了",
  };
  pageHotParams.value = { ...pageParams.value };
  pageAiParams.value = { ...pageParams.value };
  pageCollecParams.value = { ...pageParams.value };
  if (tab == "ai" || tab == "favorite") {
    if (isLogin.value == 1) {
      activeTab.value = tab;
    } else {
      ElMessageBox.confirm("您当前还未登录，是否立即登录？", "提示", {
        confirmButtonText: "立即登录",
        cancelButtonText: "稍后再说",
        type: "warning",
      })
        .then(() => {
          handleLogin();
        })
        .catch(() => {
          activeTab.value = "latest";
        });
    }
  } else {
    activeTab.value = tab;
  }
};

const onPostLoad = () => {
  searchPostList();
};
const onHotLoad = () => {
  searchHotList();
};
const onCollectLoad = () => {
  searchCollectList();
};
const onAiLoad = () => {
  searchAiList();
};
</script>


<style lang="scss" scoped>
/* 悬浮咨询按钮样式 */
.float-consult-btn {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 60px;
  height: 60px;
  background-color: #1e88e5;
  color: white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 100;
}

.float-consult-btn span {
  font-size: 12px;
  margin-top: 2px;
}

.float-consult-btn .el-icon {
  font-size: 24px;
}
.sticky-header {
  transition: all 0.3s ease;
}

.sticky-header.is-sticky {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.job-tabs-container {
  margin: 20px auto;
  max-width: 1200px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  color: #333;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

:deep(.custom-tabs .el-tabs__nav-wrap::after) {
  height: 1px;
  background-color: #eee;
}

:deep(.custom-tabs .el-tabs__item) {
  font-size: 16px;
  padding: 0 25px;
  height: 50px;
  line-height: 50px;
  color: #666;
  transition: all 0.3s;
}

:deep(.custom-tabs .el-tabs__item:hover) {
  color: #1890ff;
}

:deep(.custom-tabs .el-tabs__item.is-active) {
  color: #1890ff;
  font-weight: 600;
}

:deep(.custom-tabs .el-tabs__active-bar) {
  height: 3px;
  background-color: #1890ff;
  border-radius: 3px 3px 0 0;
}
:deep(.el-tabs__nav-next) {
  line-height: 60px;
}
:deep(.el-tabs__nav-prev) {
  line-height: 60px;
}
:deep(.custom-tabs .el-tabs__item) {
  padding: 10px;
}
:deep(.el-tabs__nav) {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  float: initial;
}
:deep(.el-tabs__nav-scroll) {
  padding: 0 20px;
}
.job-list {
  padding: 15px 0;
}
.home {
  .nav-bar {
    margin-top: -37px;
  }
}

.post-list {
  padding-bottom: 80px;
  .post-list-header {
    display: flex;
    justify-content: space-between;
    padding-right: 16px;
    font-size: 14px;
  }
  .list-title {
    position: relative;
    padding-left: 28px;
    font-size: 14px;
    font-weight: bold;

    &::before {
      position: absolute;
      top: 1px;
      left: 16px;
      content: "";
      width: 4px;
      height: 18px;
      background-color: $baseColor;
      border-radius: 4px;
    }
  }
}
.menu {
  padding: 0 16px;
  margin-bottom: 20px;
  .list {
    display: flex;
    flex-direction: row;
    align-items: center;
    .item {
      width: 25%;
      height: 40px;
      background: #eee;
      text-align: center;
      font-size: 14px;
      line-height: 40px;
    }
    .active {
      background: #1296db;
      color: #ffffff;
    }
  }
}
</style>